import { LitElement, html } from "lit";

class PropertySetterObserver extends LitElement {
    static get properties() {
        return {
            _focused: { type: Boolean }
        };
    }

    constructor() {
        super();

        this.focused = false;
    }

    get focused() {
        return this._focused;
    }

    //要观察属性的变化，你可以编写自己的getter和setter
    //当它们被设置时产生副作用。属性设置为
    //其他组件在呈现时，setter将被调用。
    set focused(focused) {
        //如果除了副作用，你还需要设置渲染的值
        //属性在不同的名称下。
        this._focused = focused;

        if (focused) {
            this.shadowRoot.getElementById("amountInput").focus();
        }
    }

    render() {
        return html`
      <input
        id="amountInput"
        type="number"
        name="amount"
        @blur="${() => (this.focused = false)}"
      />
      Focused: ${this._focused}
      <button @click="${() => (this.focused = true)}">Focus input</button>
    `;
    }
}

customElements.define("property-setter-observer", PropertySetterObserver);
